<template>
	<view class="container">
		<view class="top">
			<view class="topl">
				<navigator url="/pages/school/Reported">本学期已上报</navigator>
				<text class="text1">127/128次</text>
			</view>
			<view class="topr">
				<navigator url="/pages/school/List_anomalies">本学期异常名单</navigator>
				<text>100人</text>
			</view>
		</view>
		<view class="mid">
			<view class="midl">
				<text @click="showContent('content1')">已确认(2)</text>
			</view>
			<view class="midr">
				<text @click="showContent('content2')">未确认(2)</text>
			</view>
		</view>
		<view class="bot" v-if="showContent1">
			<view class="bot1">
				<view class="bot1t">
					<img src="../../static/rili.png" alt="" />
					<text class="text2">2024年8月4日（今天）</text>
					<text>异常人数：1</text>
				</view>
				<view class="bot1b">
					<text>异常说明关键词：#着急出校#</text>
				</view>
			</view>
			<view class="bot1">
				<view class="bot1t">
					<img src="../../static/rili.png" alt="" />
					<text class="text2">2024年8月4日（今天）</text>
					<text>异常人数：1</text>
				</view>
				<view class="bot1b">
					<text>异常说明关键词：#着急出校#</text>
				</view>
			</view>
			<view class="bot1">
				<view class="bot1t">
					<img src="../../static/rili.png" alt="" />
					<text class="text2">2024年8月4日（今天）</text>
					<text>异常人数：1</text>
				</view>
				<view class="bot1b">
					<text>异常说明关键词：#着急出校#</text>
				</view>
			</view>
			<view class="bot1">
				<view class="bot1t">
					<img src="../../static/rili.png" alt="" />
					<text class="text2">2024年8月4日（今天）</text>
					<text>异常人数：1</text>
				</view>
				<view class="bot1b">
					<text>异常说明关键词：#着急出校#</text>
				</view>
			</view>
			<view class="bot1">
				<view class="bot1t">
					<img src="../../static/rili.png" alt="" />
					<text class="text2">2024年8月4日（今天）</text>
					<text>异常人数：1</text>
				</view>
				<view class="bot1b">
					<text>异常说明关键词：#着急出校#</text>
				</view>
			</view>
			<view class="bot1">
				<view class="bot1t">
					<img src="../../static/rili.png" alt="" />
					<text class="text2">2024年8月4日（今天）</text>
					<text>异常人数：1</text>
				</view>
				<view class="bot1b">
					<text>异常说明关键词：#着急出校#</text>
				</view>
			</view>
			<view class="bot1">
				<view class="bot1t">
					<img src="../../static/rili.png" alt="" />
					<text class="text2">2024年8月4日（今天）</text>
					<text>异常人数：1</text>
				</view>
				<view class="bot1b">
					<text>异常说明关键词：#着急出校#</text>
				</view>
			</view>
		</view>
		<view class="bot" v-if="showContent2">
			<view class="bot2">
				<img src="../../static/rili.png" alt="" />
				<text class="text3">2024年8月4日</text>
				<text class="text4">未确认</text>
			</view>
			<view class="bot2">
				<img src="../../static/rili.png" alt="" />
				<text class="text3">2024年8月4日</text>
				<text class="text4">未确认</text>
			</view>
			<view class="bot2">
				<img src="../../static/rili.png" alt="" />
				<text class="text3">2024年8月4日</text>
				<text class="text4">未确认</text>
			</view>
			<view class="bot2">
				<img src="../../static/rili.png" alt="" />
				<text class="text3">2024年8月4日</text>
				<text class="text4">未确认</text>
			</view>
			<view class="bot2">
				<img src="../../static/rili.png" alt="" />
				<text class="text3">2024年8月4日</text>
				<text class="text4">未确认</text>
			</view>
			<view class="bot2">
				<img src="../../static/rili.png" alt="" />
				<text class="text3">2024年8月4日</text>
				<text class="text4">未确认</text>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref, onMounted } from 'vue';
	
	// 定义两个响应式变量，用于控制内容显示
	const showContent1 = ref(false);
	const showContent2 = ref(false);
	
	// 切换内容显示的函数
	const showContent = (bot) => {
	  // 先隐藏所有内容
	  showContent1.value = false;
	  showContent2.value = false;
	  
	  // 根据参数显示对应的内容
	  if (bot === 'content1') {
	    showContent1.value = true;
	  } else if (bot === 'content2') {
	    showContent2.value = true;
	  }
	};
</script>
<style>
	.container {
		width: 375px;
		height: 723px;
		background: #F3F5F9;
		margin: 0 auto;
	}
	.top{
		display: flex;
		flex-direction: row;
	}
	.topl,.topr {
		width: 170px;
		height: 100px;
		margin-left: 12px;
		margin-top: 18px;
		border: 1px solid;
		border-radius: 12px;
		background-image: url(../static/bg2.png);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.navigator {
		width: 73px;
		height: 15px;
		font-size: 12px;
		margin-bottom: 12px;
	}
	.text1 {
		color: #FFFFFF;
	}
	.mid {
		display: flex;
		flex-direction: row;
	}
	.midl,.midr {
		width: 90px;
		height: 30px;
		border: 1px solid;
		border-radius: 15px;
		line-height: 30px;
		text-align: center;
	}
	.midl text,.midr text {
		font-size: 12px;
	}
	.midl {
		margin-left: 12px;
		margin-top: 16px;
	}
	.midr {
		margin-top: 16px;
	}
	.bot {
		width: 351px;
		height: 526px;
		border: 1px solid;
		border-radius: 12px;
		margin-left: 12px;
		margin-top: 16px;
		background-color: #FFFFFF;
	}
	.bot1 {
		width: 328px;
		height: 61px;
		display: flex;
		flex-direction: column;
		margin-left: 12px;
		margin-top: 12px;
	}
	.bot1t{
		display: flex;
		flex-direction: row;
		margin-top: 12px;
		margin-left: 12px;
		margin-bottom: 8px;
	}
	.bot1t text {
		font-size: 15px;
	}
	.bot1b text {
		font-size: 12px;
		margin-left: 12px;
	}
	.img {
		width: 14px;
		height: 14px;
	}
	.text2 {
		margin-right: 42px;
	}
	.bot2 {
		width: 328px;
		height: 39px;
		display: flex;
		flex-direction: row;
		margin-left: 12px;
		margin-top: 25px;
		margin-bottom: 20px;
	}
	img {
		width: 14px;
		height: 14px;
	}
	.bot2 text{
		font-size: 15px;
	}
	.text3 {
		margin-right: 163px;
	}
	.text4 {
		color: #9C131E;
	}
</style>